<script setup>
import { ref, watch } from 'vue'
const page = ref(1)
const size = ref(10)
const emit = defineEmits(['handleCurrentChange', 'handleSizeChange', 'update:modelValue'])
const props = defineProps({
  total: {
    type: Number,
    default: 0
  },
  modelValue: {
    type: Number,
    default: 1
  }
})

// 监听 modelValue 的变化
watch(() => props.modelValue, (newVal) => {
  page.value = newVal
})

function handleSizeChange(size) {
  emit('handleSizeChange', size)
}
function handleCurrentChange(current) {
  page.value = current
  emit('update:modelValue', current)
  emit('handleCurrentChange', current, size.value)
}
function reset(){
  page.value = 1
  emit('update:modelValue', 1)
}
defineExpose({
  reset
})
</script>
<template>
  <!-- 分页 -->
  <div class="pagination">
    <el-pagination
      :current-page="page"
      :page-size="size"
      :page-sizes="[3, 5, 10]"
      size="large"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style>
.pagination {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
</style>
